<template>
  <div class="comment_div">
    <div>
      <router-link :to="`/u/${comment.userDomain}`">
        <a-avatar :src="comment.userAvatar"/>
      </router-link>
    </div>
    <div class="comment_main">
      <div class="comment_user_name">
        <router-link :to="`/u/${comment.userDomain}`">
          {{ comment.userName }}
        </router-link>
      </div>
      <a-space class="comment_content">
        <a-space v-if="comment.atUserId">
          <span>回复</span>
          <router-link :to="`/u/${comment.atUserDomain}`">@{{ comment.atUserName }}</router-link>
          <span>：</span>
        </a-space>
        {{ comment.content }}
      </a-space>
      <div class="comment_actions">
        <a-space>
          <span>{{ comment.createdTime }}</span>
          <a v-if="user.id && comment.userId===user.id" @click="deleteComment(comment)">删除</a>
        </a-space>
        <a-space>
          <a-spin :spinning="likeLoading" size="small">
            <a-space>
              <LikeOutlined @click="changeLike" v-if="!comment.isLike"/>
              <LikeFilled @click="changeLike" v-else/>
              <span>{{ comment.likes }}</span>
            </a-space>
          </a-spin>
          <MessageOutlined @click="replyClick"/>
        </a-space>
      </div>
      <comment-form v-if="isShow" :blog-id="comment.blogId" :parent="comment" @addComment="addComment"/>
      <a-list class="child_comment_list" item-layout="horizontal" :data-source="comment.childList"
              v-if="comment.childList && comment.childList.length>0">
        <template #renderItem="{ item }">
          <a-list-item>
            <comment :comment="item" @addComment="addComment" @deleteComment="deleteComment"/>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
import { LikeFilled, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue'
import CommentForm from '@/components/comment/CommentForm'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { DeleteCommentForUser } from '@/service/blog'
import { LikeComment, UnlikeComment } from '@/service/operate'

export default defineComponent({
  props: {
    comment: {
      type: Object,
      default () {
        return {
          id: '',
          blogId: '',
          userId: '',
          userName: '',
          userDomain: '',
          userAvatar: '',
          parentId: '',
          atUserId: '',
          atUserName: '',
          atUserDomain: '',
          content: '',
          likes: 0,
          isLike: false,
          createdTime: '',
          childList: []
        }
      }
    }
  },
  emits: ['addComment', 'deleteComment'],
  setup (props, context) {
    const { proxy } = getCurrentInstance()
    const router = useRouter()
    const store = useStore()

    const state = reactive({
      user: computed(() => store.state.user),
      isShow: false,
      comment: props.comment,
      likeLoading: false
    })

    const methods = reactive({
      changeLike: async () => {
        if (state.comment.isLike) {
          await UnlikeComment(state.comment.id)
          state.comment.likes -= 1
        } else {
          await LikeComment(state.comment.id)
          state.comment.likes += 1
        }
        state.comment.isLike = !state.comment.isLike
      },
      replyClick: () => {
        if (state.user.id) {
          state.isShow = !state.isShow
        } else {
          router.push('/login')
        }
      },
      addComment: comment => {
        if (state.comment.parentId) {
          context.emit('addComment', comment)
        } else if (state.comment.childList) {
          state.comment.childList.push(comment)
        } else {
          state.comment.childList = []
          state.comment.childList.push(comment)
        }
        state.isShow = false
      },
      deleteComment: async (comment) => {
        if (state.comment.id !== comment.parentId) {
          context.emit('deleteComment', comment)
        } else {
          await DeleteCommentForUser(comment.id)
          const index = state.comment.childList.indexOf(comment)
          state.comment.childList.splice(index, 1)
          proxy.$message.success('删除评论成功！')
        }
      }
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  },
  components: {
    CommentForm,
    LikeFilled,
    LikeOutlined,
    MessageOutlined
  }
})
</script>

<style lang="less" scoped>
.comment_div {
  width: 100%;
  padding: 0 10px;
  display: flex;
  justify-content: space-around;

  & .comment_main {
    width: 95%;
    display: flex;
    flex-direction: column;

    & .comment_user_name {
      & a {
        color: #000000;
      }
    }

    & .comment_content {
      margin: 5px 0;
    }

    & .comment_actions {
      margin-top: 5px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    & .child_comment_list {
      margin: 10px 0;
      background-color: #00000005;
    }
  }
}
</style>
